<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <!--polyfills-->
    <script crossorigin src="https://unpkg.com/core-js-bundle@3.3.2/minified.js"></script>
    <!--dependencies-->
    <script crossorigin src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <!--library-->
    <script src="dist/docx-preview.js"></script>
</head>

<body>
    <div class="hstack p-2 gap-2 bg-light position-sticky top-0" style="z-index: 1;">
        <input id="files" type="file" class="form-control" style="width: 50ch;" accept=".docx" />
        <button id="loadButton" class="btn btn-primary px-4">Load</button>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="optionsMenuButton"
                data-bs-toggle="dropdown" aria-expanded="false">
                Options
            </button>
            <ul id="optionsMenu" class="dropdown-menu" aria-labelledby="optionsMenuButton">
            </ul>
        </div>
    </div>

    <div id="document-container">
    </div>

    <script>
        const docxOptions = Object.assign(docx.defaultOptions, {
            debug: true,
            experimental: true,
        });

        document.getElementById("loadButton").addEventListener("click", loadDocx);

        function loadDocx() {
            var file = document.getElementById("files").files[0];

            if (!file)
                return;

            var container = document.getElementById("document-container");

            docx.renderAsync(file, container, null, docxOptions)
                .then(function (x) { console.log(x); });
        }

        const menu = document.getElementById("optionsMenu");

        Object.keys(docxOptions).filter(key => !/className/i.test(key)).forEach(function(key) {
            const listItem = document.createElement("li");
            listItem.innerHTML = `
            <div class="dropdown-item">
                <div class="form-check">
                    <label class="form-check-name"><input type="checkbox" class="form-check-input" ${docxOptions[key] ? 'checked' : ''}> ${key}</label>
                </div>
            </div>`;

            const checkInput = listItem.querySelector("input");

            checkInput.addEventListener("click", function(e) {
                docxOptions[key] = checkInput.checked;
                loadDocx();
            });

            menu.appendChild(listItem);
        });
    </script>
</body>

</html>